<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="name" @blur="fn" />

    <MyRecord :list="list2"></MyRecord>
  </div>
</template>
<script>
import MyRecord from './components/MyRecord.vue'
export default {
  data() {
    return {
      name: '',
      list: [
        {
          date: '2020 - 12 - 12',
          docName: '章三',
          result: '感冒',
          msg: '感冒药',
          details: '',
        },
        {
          date: '2020 - 12 - 12',
          docName: '李四',
          result: '头疼',
          msg: '止疼药',
          details: '',
        },
        {
          date: '2020 - 12 - 12',
          docName: '王五',
          result: '腰痛',
          msg: '止痛贴',
          details: '',
        },
      ],
      list2: [
        {
          date: '2020 - 12 - 12',
          docName: '章三',
          result: '感冒',
          msg: '感冒药',
          details: '',
        },
        {
          date: '2020 - 12 - 12',
          docName: '李四',
          result: '头疼',
          msg: '止疼药',
          details: '',
        },
        {
          date: '2020 - 12 - 12',
          docName: '王五',
          result: '腰痛',
          msg: '止痛贴',
          details: '',
        },
      ],
    }
  },
  methods: {
    fn() {
      this.list2 = this.list.filter((item) => {
        if (item.docName === this.name) {
          return item
        }
      })
    },
  },
  components: {
    MyRecord,
  },
}
</script>
